<template>
  <div class="pbox">
    <Box title="数据上传检测">
      <div class="content">
        <VirtualList :data="data" :item-height="30" :container-height="150" :columns="columns">
          <template #default="{ item }">
            <!-- 自定义列表项内容 -->
            <div>{{ item.mkname }}</div>
          </template>
        </VirtualList>
      </div>
    </Box>
  </div>
</template>
<script setup>
import Box from "@/components/Box/index.vue";
import VirtualList from "@/components/List/index.vue";
import { reactive, ref,onMounted } from "vue";
import {getSJSCJC} from "@/api/home"

onMounted(()=>{
  getSJSCJC().then(e=>{
    data.value = e.data
  })
})
const columns = reactive([
  {
    key: "mkname",
    dataKey: "mkname",
    title: "煤矿名称",
    width: 100,
    align: "center",
  },
  {
    key: "sysname",
    dataKey: "sysname",
    title: "系统名称",
    width: 200,
    align: "center",
  },
  {
    key: "status",
    dataKey: "status",
    title: "状态",
    width: 100,
    align: "center",
  },
  {
    key: "jgtime",
    dataKey: "jgtime",
    title: "间隔时间",
    width: 190,
    align: "center",
  },
  {
    key: "loadtime",
    dataKey: "loadtime",
    title: "上传时间",
    width: 190,
    align: "center",
  },
  {
    key: "users",
    dataKey: "users",
    title: "责任人",
    width: 100,
    align: "center",
  },
]);

const data = ref([]);
</script>
<style scoped>
.pbox {
  width:47%;
  height: 25%;
  position: absolute;
  bottom: 10px;
}
.rightBtn {
  display: flex;
  gap: 10px;
}
.content {
  width: 100%;
  height: 100%;
}
.tables {
  background-color: #00000000;
}
:deep(.tables .el-table-v2__main) {
  background-color: #00000000;
}
:deep(.tables .el-table-v2__header-cell) {
  background-color: #00000000;
}
:deep(.tables .el-table-v2__header-row) {
  border: none;
}
</style>
